<template>
	<view class="shopIn-wrap page-bg">
		<view class="page-header">
			<image class="header-bg" src="../../static/item-21.png"></image>
			<view class="info-wrap">
				<view class="title">成为店长、团长</view>
				<view class="info-line">
					<view class="price-wrap">
						<view class="price yuan">{{info.amount || 3000}}</view>
						<view class="origin-price">原价 <text class="yuan">3999</text></view>
					</view>
					<view class="btn" v-if="userInfo.isRegimental">你已是团长</view>
					<view class="btn" v-else @click="placeOrder">立即开通</view>
				</view>
			</view>
		</view>
		<view class="page-rules">
			<view class="rules-title">特权权益介绍</view>
			<view class="rules-desc rich-text">
				<rich-text :nodes="art.artContent"></rich-text>
			</view>
			<view class="rules-contact" @click="makePhone">服务热线: {{common.servicePhone}}</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default{
		data() {
			return{
				common,
				info: {},
				userInfo: {},
				art: ''
			}
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			this.userInfo = common.getUserInfo()
		},
		methods:{
			getArt() {
				api.getArtByCode({ artCode: common.artCode.sjrzxy }, res => {
					this.art = res
				})
			},
			link(url) {
				this.$link(url)
			},
			makePhone() {
				this.$makePhoneCall()
			},
			getInfo() {
				api.getUpgradeAmount({},(res) => {
					 console.log(res);
					 this.info = res
				}) 
			},
			// 下单接口
			placeOrder() {
				let payType = this.currentPayType
				if(this.payMoney === 0) {
					payType = 0
				}
				let obj = {
					orderType: 1, // 必选参数 	订单类型,升级团长：1,拼团:2,购物：3,充值：4
					payType: 2 // 免费参与：0,钱包支付：1,微信支付:2,支付宝支付:3,全被抵扣(实际支付0):4, 正常情况下，0和4不需要前端传，由后台自行判断，传其他123即可
				}
				api.placeAnOrder(obj, (res) => {
					console.log('升级成功');
					if(!res.payParams) { this.$showToast('支付参数错误, 请稍后重试~'); return }
				    let orderInfo = { orderNo: res.orderNo, actualAmount: res.actualAmount }
					common.uniPay(JSON.parse(res.payParams), orderInfo, () => {
						this.$showToast('恭喜您，您已成功升级为店长(团长)~')
						this.$updataUserInfo()
					})
				}) 
			}
		},
		components:{
		}
	}
</script>

<style scoped lang="less">
@import url('../../app.less');
	.shopIn-wrap{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.page-header{
		position: relative;
		.content-30;
		.br;
		.info-wrap{
			position: relative;
		}
		.header-bg{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.title{
			font-size: 48rpx;
			line-height: 48rpx;
			margin-bottom: 90rpx;
		}
		.info-line{
			.flex-base;
		}
		.origin-price{
			color: #eee;
		}
		.price-wrap{
			.flex-base;
			
			flex-direction: column;
			align-items: flex-start;
			.price{
				font-size: 80rpx;
				color: @font-base-color;
			}
			text{
				text-decoration: line-through;
			}
		}
		.btn{
			background-color: @font-base-color;
			color: @font-orange-color;
			height: 60rpx;
			line-height: 60rpx;
			font-weight: bold;
			.f28;
		}
	}
	
	.page-rules{
		margin-top: 20rpx;
		.br;
		.content-20;
		background-color: @f;
		.rules-title{
			.fw;
			.f32;
			position: relative;
			padding: 0 6rpx;
			    display: inline-block;
				text-align: center;
				box-sizing: border-box;
				margin-bottom: 30rpx;
			&::after{
				content: '';
				display: block;
				width: 100%;
				height: 6rpx;
				background: rgba(207,169,114,0.7);
				bottom: 4rpx;
				position: absolute;
				left: 0;
			}
		}
		.rules-desc{
			font-size: 24rpx;
			color: #333333;
			line-height: 42rpx;
			
		}
		.rules-contact{
			color: @font-orange-color;
			line-height: 42rpx;
		}
	}
	
</style>
